<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>编辑消费记录</title>
    <!-- 采用绝对路径导入css文件 -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/index.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/style.css"/>
    <!-- 采用绝对路径导入jquery文件 -->
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //提示用户添加失败，删除失败，修改失败
            if (!${ empty requestScope.msg }) {
                alert("${requestScope.msg}");
            }
            //验证输入框非空
            $("#tablesubmit").click(function () {
                //验证输入框是否为空
                let name = $("#costName").val();
                let money = $("#money").val();
                if (name === null || name === "") {
                    alert("消费名称不能为空");
                    $("#costName").focus();
                    return false;
                }
                if (money === null || money === "") {
                    alert("消费金额不能为空");
                    $("#money").focus();
                    return false;
                }

            });

        });
    </script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path fill="#0099ff" fill-opacity="1"
          d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
<div id="header">
    <span class="wel_word"></span>
</div>

<div id="main" style="padding: 20px 100px 20px 100px">
    <form action="${pageContext.request.contextPath }/manager/homeCostServlet" method="get">
        <!-- hidden隐藏域,判断是添加请求还是修改请求：param.id取id的值,id为空是添加；id非空是修改 -->
        <input type="hidden" id="action" name="action" value="${ empty param.id ? "add":"update" }">
        <input type="hidden" name="pageNo" value="${empty param.pageNo?1:param.pageNo}">
        <input type="hidden" id="id" name="id" value="${requestScope.homeCost.id}">
        <costname>
            <div class="mb-3">
            <label for="costName" class="form-label">消费名称</label>
            <input type="text" class="form-control input" id="costName" name="costName" disabled
                   value="${requestScope.homeCost.costName}" placeholder="请输入名称" >
            </div>
            <div style="text-align: right;float: right" id="name-len" ></div>
        </costname>

        <money>
            <div class="mb-3">
                <label for="money" class="form-label">消费金额</label>
                <input type="text" class="form-control input" id="money" name="money" disabled
                       value="${requestScope.homeCost.money}" placeholder="请输入金额">
            </div>
        </money>
        <div class="mb-3">
            <label for="name" class="form-label">创建人</label>
            <input type="text" class="form-control" id="name" name="name" value="${requestScope.homeCost.name}"
                   placeholder="创建人系统自动录入" disabled style="color: #979696;">
        </div>
        <date>
            <div class="mb-3">
                <label for="date" class="form-label">登记日期</label>
                <input type="text" class="form-control" id="date" name="date" value="${requestScope.homeCost.date}"
                       placeholder="日期系统自动录入" disabled style="color: #979696;">
            </div>
        </date>
        <remark>
            <div class="mb-3">
                <label for="remark" class="form-label">备注</label>
                <textarea class="form-control input" id="remark" name="remark" rows="4" disabled
                          style="resize: none;font-weight: bold" maxlength="200" placeholder="200字以内">${requestScope.homeCost.remark}</textarea>
            </div>
            <div style="text-align: right;float: right" id="remark-len"></div>
        </remark>
        <button-group>
            <a id="update" class="btn btn-primary btn-lg" style="margin: 10px 0 0 0">修改</a>
            <input id="tablesubmit" type="submit" class="btn btn-primary btn-lg" value="保存"
                   style="display: none;margin: 10px 0 0 0"/>
            <a id="cancel" class="btn btn-primary btn-lg" style="display: none;margin: 10px 0 0 10px">取消</a>
            <a id="back" class="btn btn-primary btn-lg" onclick="history.go(-1)" style="margin: 10px 0 0 10px">返回</a>
        </button-group>
    </form>
</div>
<%--统计字数--%>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/startMonitor.js"></script>
<script type="text/javascript">
    $(function () {
        startMonitor("costName", "name-len", 20)
        startMonitor("remark", "remark-len", 200)
        if ("${ empty param.id ? "add":"update" }" === "update") {
            //如果id存在
            $(".wel_word").text("消费记录详情")
            $("#update").click(function () {
                $("#costName").removeAttr("disabled")
                $("#money").removeAttr("disabled")
                $("#remark").removeAttr("disabled")
                $("#update").css("display", "none")
                $("#back").css("display", "none")
                $("#tablesubmit").css("display", "")
                $("#cancel").css("display", "")
                $(".input").css("color", "black")
                $(".wel_word").text("修改消费记录")
            })
            $("#cancel").click(function () {
                $("#costName").attr("disabled", "disabled")
                $("#money").attr("disabled", "disabled")
                $("#remark").attr("disabled", "disabled")
                $("#update").css("display", "")
                $("#back").css("display", "")
                $("#tablesubmit").css("display", "none")
                $("#cancel").css("display", "none")
                $(".input").css("color", "#979696")
                $(".wel_word").text("消费记录详情")
            })
        } else {
            //如果id不存在
            $(".wel_word").text("添加消费记录")
            $("#costName").removeAttr("disabled")
            $("#money").removeAttr("disabled")
            $("#remark").removeAttr("disabled")
            $("#update").css("display", "none")
            $("#back").css("display", "")
            $("#tablesubmit").css("display", "")
            $("#cancel").css("display", "none")
            $(".input").css("color", "black")
        }
    })
</script>
</body>
</html>